<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="zh">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="Keywords" content="简单的XHTML页面" />
	<meta name="Description" content="这是一个简单的XHTML页面" />
	<title>简单的XHTML页面</title>
<link rel="stylesheet" type="text/css" href="http://a.tbcdn.cn/s/kissy/1.3.0rc/css/base.css">
<link rel="stylesheet" type="text/css" href="http://a.tbcdn.cn/app/dp/css/global.css">
<script type="text/javascript" src="http://a.tbcdn.cn/??s/kissy/1.3.0/seed-min.js" data-config="{combine:true}"></script>
<link rel="stylesheet" href="http://a.tbcdn.cn/s/kissy/1.3.0/css/dpl/base.css" />
</head>
<body>

<style>
/*--标准--*/
.t-tabview {position:relative;text-align:left;width:100%;}
.t-tabview .tab-nav {width:auto;*width:100%;border-color:#2647A0;border-style:solid;border-width:0 0 5px 0;}
.t-tabview .tab-nav li {float:left;border:1px solid #999999;color:black;padding:5px;margin:0 0.16em 0 0}
.t-tabview .tab-nav li a,
.t-tabview .tab-nav li a:link,
.t-tabview .tab-nav li a:visited,
.t-tabview .tab-nav li a:hover {color:black;text-decoration:none;}
.t-tabview .tab-nav li.selected a,
.t-tabview .tab-nav li.selected a:link,
.t-tabview .tab-nav li.selected a:visited,
.t-tabview .tab-nav li.selected a:hover {color:white;text-decoration:none;}
.t-tabview .tab-nav li.selected {background-color:#2647A0;border:1px solid #2647A0;font-weight:bold;}
.t-tabview .tab-content {border:1px solid gray;}


/*--标准--*/
.t-slide {position:relative;text-align:left;width:600px;overflow:hidden;}
.t-slide .tab-nav {position:absolute;right:10px;bottom:10px;border-color:#2647A0;z-index:2;}
.t-slide .tab-nav li {float:left;}
.t-slide .tab-nav li a {color:white;background-color:red;color:white;margin:5px;padding:2px 5px;}
.t-slide .tab-nav li.selected a{background-color:#2647A0;font-weight:bold;}
.t-slide .tab-content {width:600px;height:200px;overflow:hidden;z-index:1;}
.t-slide .tab-content img {width:600px;height:200px;}

/*--标准2-*/
.t-slide-2 {position:relative;text-align:left;width:600px;overflow:hidden;}
.t-slide-2 .tab-nav {position:absolute;right:10px;bottom:10px;border-color:#2647A0;z-index:2;}
.t-slide-2 .tab-nav li {float:left;}
.t-slide-2 .tab-nav li a {color:white;background-color:red;color:white;margin:5px;padding:2px 5px;}
.t-slide-2 .tab-nav li.selected a{background-color:#2647A0;font-weight:bold;}
.t-slide-2 .tab-content {width:100%;height:400px;overflow:hidden;z-index:1;}
.t-slide-2 .tab-content img {width:600px;height:100%;}


</style>
<div id="J_tab_1" class="t-tabview my-hack">
  <ul class="tab-nav clearfix">
    <li class="selected"><a href="#tab1"><em>Tab One Label</em></a></li>
    <li><a href="#tab2"><em>Tab Two Label</em></a></li>
    <li><a href="#tab3"><em>Tab Three Label</em></a></li>
  </ul>
  <div class="tab-content">
	<div class="tab-pannel"><p>Tab One ContentTab One ContentTab One ContentTab One Content</p></div>
    <div class="tab-pannel"><p>Tab Two ContentTab Two ContentTab Two ContentTab Two ContentTab Two Content</p></div>
    <div class="tab-pannel"><p>Tab Three ContentTab Three ContentTab Three ContentTab Three Content</p></div>
  </div>
</div>


<p></p>
<p>可以将tab-nav值空</p>

<div id="J_tab_2" class="t-slide my-hack mt20">
	<!--可以将tab-nav值空-->
  <ul class="tab-nav clearfix">
  </ul>
  <div class="tab-content">
	<div class="tab-pannel"><p><img src="http://img03.taobaocdn.com/tps/i3/T1Fu9EXuljXXXG7QLy-500-375.jpg" /></p></div>
    <div class="tab-pannel"><p><img src="http://img04.taobaocdn.com/tps/i4/T1E2iQXz4cXXXG7QLy-500-375.jpg" /></p></div>
    <div class="tab-pannel"><p><img src="http://img01.taobaocdn.com/tps/i1/T1fMKDXrpiXXXG7QLy-500-375.jpg" /></p></div>
	<div class="tab-pannel"><p><img src="http://img02.taobaocdn.com/tps/i2/T19jOPXx0fXXXG7QLy-500-375.jpg" /></p></div>
  </div>
</div>


<div id="J_tab_3" class="t-slide-2 mt20">
  <ul class="tab-nav clearfix">
    <li class="selected"><a href="#">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
	<li><a href="">4</a></li>
  </ul>
  <div class="tab-content">
	<div class="tab-pannel"><p><img src="http://img03.taobaocdn.com/tps/i3/T1Fu9EXuljXXXG7QLy-500-375.jpg" /></p></div>
    <div class="tab-pannel"><p><img src="http://img04.taobaocdn.com/tps/i4/T1E2iQXz4cXXXG7QLy-500-375.jpg" /></p></div>
    <div class="tab-pannel"><p><img src="http://img01.taobaocdn.com/tps/i1/T1fMKDXrpiXXXG7QLy-500-375.jpg" /></p></div>
	<div class="tab-pannel"><p><img src="http://img02.taobaocdn.com/tps/i2/T19jOPXx0fXXXG7QLy-500-375.jpg" /></p></div>
  </div>
</div>


</body>
<script>
    var S = KISSY;
	var srcPath = "../../../";
	S.config({
		packages:[
			{
				name:"gallery",
				path:srcPath,
				charset:"utf-8",
				combine:false,
				tag:S.now(),
				ignorePackageNameInUri:true,
				debug:true
			}
		]
	});

	KISSY.use('gallery/slide/1.1/',function(S,Slide){

		new Slide('J_tab_1',{
			autoSlide:false,
			eventype:'click'
		});

		new Slide('#J_tab_2',{
			autoSlide:false,
			eventype:'click',
			effect:'vSlide',
			autoSlide:true,
			timeout:3000,
			speed:600
		});

		new Slide('J_tab_3',{
			autoSlide:false,
			eventype:'click',
			effect:'hSlide',
			autoSlide:true,
			timeout:3000,
			speed:500,
			hoverStop:true
		});
		
	});

</script>
</html>

